// pages/bullet/bullet.js
Page({
  data: {
    bulletText: '',
    fontSize: 30,
    isBold: false, // 字体加粗
    selectedColor: '#FF0000',
    backgroundColor: '#000000',
    speed: 3, // 修改默认速度为正常
    speedOptions: [ // 速度选项
      { value: 1, label: '很慢' },
      { value: 2, label: '较慢' },
      { value: 3, label: '正常' },
      { value: 4, label: '较快' },
      { value: 5, label: '很快' }
    ],
    position: 'center',
    isPaused: false,
    canvasWidth: 0,
    canvasHeight: 0,
    bullets: [],
    animationId: null,
    showSettings: true,
    windowHeight: 0, // 添加窗口高度数据
    controlPanelHeight: 0, // 添加控制面板高度数据
  },

  onLoad() {
    const systemInfo = wx.getSystemInfoSync();
    // 初始化时根据设置面板显示状态计算canvas高度
    const canvasHeight = this.calculateCanvasHeight(systemInfo.windowHeight, true);
    this.setData({
      canvasWidth: systemInfo.windowWidth,
      canvasHeight: canvasHeight,
      windowHeight: systemInfo.windowHeight,
      controlPanelHeight: 250
    });

    // 延迟初始化Canvas以确保DOM渲染完成
    setTimeout(() => {
      this.initCanvas();
    }, 100);
  },

  onShow() {
    if (this.data.isPaused) {
      this.setData({ isPaused: false });
      this.animate();
    }
  },

  onHide() {
    if (this.data.animationId) {
      this.setData({ isPaused: true });
    }
  },

  onUnload() {
    if (this.data.animationId) {
      clearTimeout(this.data.animationId);
    }
  },

  // 计算canvas高度的辅助函数
  calculateCanvasHeight(windowHeight, showSettings) {
    if (showSettings) {
      // 显示设置面板时，预留空间（包括控制面板和底部按钮区域）
      return windowHeight - 500;
    } else {
      // 隐藏设置面板时，只预留底部按钮区域的空间
      return windowHeight - 60;
    }
  },

  initCanvas() {
    // 确保在组件销毁前不执行
    if (this._isDestroyed) return;
    
    this.ctx = wx.createCanvasContext('bulletCanvas', this);
    // 只在初始化时启动动画，切换设置面板时不重新启动
    if (!this.data.animationId) {
      this.animate();
    }
  },

  animate() {
    // 确保在组件销毁前不执行
    if (this._isDestroyed || this.data.isPaused) return;
    
    this.ctx.setFillStyle(this.data.backgroundColor);
    this.ctx.fillRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
    
    this.updateBullets();
    this.drawBullets();
    
    this.ctx.draw();
    
    // 使用箭头函数保持this指向
    this.setData({ 
      animationId: setTimeout(() => {
        this.animate();
      }, 30) // 降低帧率，从16ms改为30ms，使动画更平滑
    });
  },

  updateBullets() {
    const { bullets, speed, canvasHeight } = this.data;
    // 根据速度档次调整速度系数（降低整体速度）
    // 调整速度系数，使其更适合手机端显示效果
    const speedFactors = { 1: 0.3, 2: 0.6, 3: 1, 4: 1.5, 5: 2 };
    const speedFactor = speedFactors[speed] || 1;
    
    let bulletsUpdated = false;
    
    for (let i = bullets.length - 1; i >= 0; i--) {
      const bullet = bullets[i];
      bullet.y -= speedFactor;
      
      // 修改为循环移动：当弹幕完全移出屏幕顶部时，重新从底部出现
      // 对于很长的弹幕，需要考虑弹幕的宽度，确保弹幕末端完全移出屏幕
      if (bullet.y + bullet.width < 0) {
        bullet.y = canvasHeight; // 重新从底部出现，初始位置为底部
      }
      
      bulletsUpdated = true;
    }
    
    // 只有当子弹有更新时才调用setData
    if (bulletsUpdated) {
      this.setData({ bullets });
    }
  },

  drawBullets() {
    const { bullets } = this.data;
    
    bullets.forEach(bullet => {
      // 设置字体样式，包括是否加粗
      const fontStyle = bullet.isBold ? 'bold ' + bullet.fontSize + 'px sans-serif' : bullet.fontSize + 'px sans-serif';
      this.ctx.font = fontStyle;
      this.ctx.setFillStyle(bullet.color);
      this.ctx.translate(bullet.x, bullet.y);
      this.ctx.rotate(-Math.PI / 2);
      this.ctx.rotate(Math.PI);
      this.ctx.fillText(bullet.text, 0, 0);
      this.ctx.rotate(-Math.PI);
      this.ctx.rotate(Math.PI / 2);
      this.ctx.translate(-bullet.x, -bullet.y);
    });
  },

  sendBullet() {
    const { bulletText, fontSize, isBold, selectedColor, position, canvasWidth, canvasHeight, bullets } = this.data;
    
    if (!bulletText.trim()) {
      wx.showToast({
        title: '请输入弹幕内容',
        icon: 'none'
      });
      return;
    }
    
    // 限制每条弹幕不超过20个字
    const text = bulletText.trim().substring(0, 20);
    
    // 限制屏幕上最多出现20条弹幕
    if (bullets.length >= 20) {
      wx.showToast({
        title: '弹幕已达上限',
        icon: 'none'
      });
      return;
    }
    
    // 根据位置设置X坐标（竖向屏幕的最左侧/中间/最右侧）
    let x;
    switch (position) {
      case 'top':
        // 当显示位置为顶部时，弹幕显示的位置要离竖向屏幕最右侧有字体大小+20px的距离
        x = canvasWidth - (fontSize + 20);
        break;
      case 'bottom':
        x = 20; // 竖向屏幕的最左侧
        break;
      case 'center':
      default:
        x = canvasWidth / 2; // 竖向屏幕的中间
        break;
    }
    
    const textWidth = this.getTextWidth(text, fontSize);
    const textHeight = fontSize;
    
    const newBullet = {
      text: text,
      x: x,
      // 修改初始位置：将弹幕的底部边缘放在屏幕底部
      y: canvasHeight, // 从底部开始（弹幕的底部边缘正好在屏幕底部）
      fontSize: fontSize,
      isBold: isBold, // 添加加粗属性
      color: selectedColor,
      width: textWidth,
      height: textHeight
    };
    
    const updatedBullets = [...this.data.bullets, newBullet];
    
    this.setData({
      bullets: updatedBullets,
      bulletText: ''
    });
    
    wx.showToast({
      title: '发送成功',
      icon: 'success',
      duration: 1000
    });
  },

  getTextWidth(text, fontSize) {
    return text.length * fontSize * 0.6;
  },

  onTextChange(e) {
    this.setData({
      bulletText: e.detail.value
    });
  },

  // 修改为滑动条方式设置字体大小
  onFontSizeChange(e) {
    this.setData({
      fontSize: e.detail.value
    });
  },

  // 字体加粗开关
  toggleBold(e) {
    this.setData({
      isBold: e.detail.value
    });
  },

  selectColor(e) {
    this.setData({
      selectedColor: e.currentTarget.dataset.color
    });
  },

  selectBgColor(e) {
    this.setData({
      backgroundColor: e.currentTarget.dataset.color
    });
  },

  // 修改为选择器方式设置速度
  onSpeedChange(e) {
    // picker返回的是索引值，需要+1转换为实际的speed值
    this.setData({
      speed: parseInt(e.detail.value) + 1
    });
  },

  setPosition(e) {
    const newPosition = e.currentTarget.dataset.position;
    this.setData({
      position: newPosition
    });
  },

  clearBullets() {
    this.setData({
      bullets: []
    });
    
    // 强制重新绘制Canvas以清除屏幕上的弹幕文字
    // 即使在暂停状态下也要清除显示
    if (this.ctx) {
      this.ctx.setFillStyle(this.data.backgroundColor);
      this.ctx.fillRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
      this.ctx.draw();
    }
    
    wx.showToast({
      title: '已清屏',
      icon: 'success',
      duration: 1000
    });
  },

  togglePause() {
    const isPaused = !this.data.isPaused;
    this.setData({ isPaused });
    
    if (!isPaused) {
      this.animate();
    }
  },

  toggleSettingsPanel() {
    const showSettings = !this.data.showSettings;
    const systemInfo = wx.getSystemInfoSync();
    // 根据设置面板显示状态重新计算canvas高度
    const canvasHeight = this.calculateCanvasHeight(systemInfo.windowHeight, showSettings);
    
    this.setData({
      showSettings: showSettings,
      canvasHeight: canvasHeight
    });
    
    // 不再重新初始化canvas，避免重复启动动画循环
    // 只需要重新绘制当前帧即可
    if (this.ctx) {
      this.ctx.setFillStyle(this.data.backgroundColor);
      this.ctx.fillRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
      this.drawBullets();
      this.ctx.draw();
    }
  },

  // 添加返回个人中心页面的方法
  navigateBack() {
    wx.navigateBack({
      delta: 1
    });
  },
  
  // 配置分享给好友
  onShareAppMessage() {
    return {
      title: '小幸运转盘',
      path: '/pages/bullet/bullet',
      imageUrl: '',
      success: (res) => {
        wx.showToast({
          title: '分享成功',
          icon: 'success',
          duration: 1000
        });
      },
      fail: (res) => {
        wx.showToast({
          title: '分享失败',
          icon: 'none',
          duration: 1000
        });
      }
    }
  },
  
  // 配置分享到朋友圈
  onShareTimeline() {
    return {
      title: '小幸运转盘',
      query: 'page=bullet',
      imageUrl: ''
    }
  }
});